<template>
	<div class="detail-page" :style='{}'>
        <div class="breadcrumb-wrapper" style="width: 100%;">
            <div class="bread_view">
                <el-breadcrumb separator="" class="breadcrumb">
                    <el-breadcrumb-item class="first_breadcrumb" :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item class="second_breadcrumb" v-for="(item,index) in breadList" :key="index">{{item.name}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="back_view">
                <el-button class="back_btn" @click="backClick" type="primary">返回</el-button>
            </div>
        </div>
		<div class="detail_view">

			<div class="info_view">
				<div class="title_view">
					<div class="detail_title">
						<span>{{detail.xiangmumingcheng}}</span>
					</div>
					<el-button class="approval_btn" type="warning" @click="approvalClick()" style="margin-left: 20px; background-color: #e6a23c; color: white; font-weight: bold; padding: 12px 24px; font-size: 16px;">审核</el-button>
				</div>
				<div class="info_item">
					<div class="info_label">项目分类</div>
					<div  class="info_text" >{{detail.xiangmufenlei}}</div>
				</div>
				<div class="info_item">
					<div class="info_label">项目阶段</div>
					<div  class="info_text" >{{detail.xiangmujieduan}}</div>
				</div>
				<div class="info_item">
					<div class="info_label">项目当前阶段</div>
					<div  class="info_text" >{{detail.xiangmudangqianjieduan}}</div>
				</div>
				<div class="info_item">
					<div class="info_label">所属领域</div>
					<div  class="info_text" >{{detail.suoshulingyu}}</div>
				</div>
				<div class="info_item">
					<div class="info_label">所属行业</div>
					<div  class="info_text" >{{detail.suoshuxingye}}</div>
				</div>
				<div class="info_item">
					<div class="info_label">项目简介</div>
					<div  class="info_text" >{{detail.xiangmujianjie}}</div>
				</div>
				<div class="info_item">
					<div class="info_label">申请动机</div>
					<div  class="info_text" >{{detail.shenqingdongji}}</div>
				</div>
				<div class="info_item">
					<div class="info_label">提交时间</div>
					<div  class="info_text" >{{detail.tijiaoshijian}}</div>
				</div>
				<div class="info_item">
					<div class="info_label">负责人账号</div>
					<div  class="info_text" >{{detail.fuzerenzhanghao}}</div>
				</div>
				<div class="info_item">
					<div class="info_label">负责人姓名</div>
					<div  class="info_text" >{{detail.fuzerenxingming}}</div>
				</div>
				<div class="info_item">
					<div class="info_label">参加意向</div>
					<div  class="info_text" >{{detail.canjiayixiang}}</div>
				</div>
				<div class="info_item">
					<div class="info_label">学号</div>
					<div  class="info_text" >{{detail.xuehao}}</div>
				</div>
				<div class="info_item">
					<div class="info_label">学生姓名</div>
					<div  class="info_text" >{{detail.xueshengxingming}}</div>
				</div>
				<div class="info_item">
					<div class="info_label">专业</div>
					<div  class="info_text" >{{detail.zhuanye}}</div>
				</div>
				<div class="info_item">
					<div class="info_label">手机号码</div>
					<div  class="info_text" >{{detail.shoujihaoma}}</div>
				</div>
				<div class="info_item">
					<div class="info_label">城市</div>
					<div  class="info_text" >{{detail.chengshi}}</div>
				</div>
				<template v-if="detail.xuesheng_shifoubiye === '是'">
					<div class="info_item">
						<div class="info_label">园区</div>
						<div  class="info_text" >{{detail.yuanqu}}</div>
					</div>
					<div class="info_item">
						<div class="info_label">街道</div>
						<div  class="info_text" >{{detail.jiedao}}</div>
					</div>
				</template>
				<template v-else>
					<div class="info_item">
						<div class="info_label">学校名称</div>
						<div  class="info_text" >{{detail.xuexiaomingcheng}}</div>
					</div>
					<div class="info_item">
						<div class="info_label">学院名称</div>
						<div  class="info_text" >{{detail.xueyuanmingcheng}}</div>
					</div>
				</template>
				<div class="info_item">
					<div class="info_label">申请时间</div>
					<div  class="info_text" >{{detail.shenqingshijian}}</div>
				</div>
				<div class="info_item">
					<div class="info_label">指导导师</div>
					<div  class="info_text" >{{detail.zhidaodaoshi}}</div>
				</div>
				<div class="info_item" v-if="centerType">
					<div class="info_label">是否审核</div>
					<div class="info_text">{{detail.sfsh}}</div>
				</div>
				<div class="info_item" v-if="centerType">
					<div class="info_label">回复内容</div>
					<div class="info_text">{{detail.shhf}}</div>
				</div>
				<div class="btn_view">
					<el-button class="cross_btn" @click="xiangmuchengguoonAcross('成果','是','','','')" type="warning">成果</el-button>
					<el-button class="edit_btn" type="primary" @click="editClick">修改</el-button>
					<el-button class="del_btn" type="danger" @click="delClick">删除</el-button>
				</div>
			</div>
		</div>
		<el-tabs type="border-card" v-model="activeName" class="tabs_view">
		</el-tabs>
		<Approval ref="approvalRef" :tableName="tableName" @shChange="init()"></Approval>
	</div>
</template>
<script setup>
	import axios from 'axios'
	import moment from 'moment'
	import {
		ref,
		getCurrentInstance,
		watch,
		onUnmounted,
		onMounted,
		nextTick,
		computed
	} from 'vue';
	import {
		ElMessageBox
	} from 'element-plus'
	import {
		useRoute,
		useRouter
	} from 'vue-router';
	import {
		useStore
	} from 'vuex';
	const store = useStore()
	const user = computed(()=>store.getters['user/session'])
	const userAvatar = computed(()=>store.getters['user/avatar'])
	const context = getCurrentInstance()?.appContext.config.globalProperties;
	const route = useRoute()
	const router = useRouter()
	//基础信息
	const tableName = 'xiangmushenqing'
	const formName = '项目申请'
	//基础信息
	const breadList = ref([{
		name: formName
	}])
	//权限验证
	const btnAuth = (e,a)=>{
		return true;
	}
	//查看权限验证
	const btnFrontAuth = (e,a)=>{
		return true;
	}
	// 返回
	const backClick = () =>{
		history.back()
	}
	// 轮播图
	const bannerList = ref([])
	// 详情
	const title = ref('')
	const detail = ref({})
    const activeName = ref('false')
	const getDetail = () => {
		context?.$http({
			url: `${tableName}/detail/${route.query.id}`,
			method: 'get'
		}).then(res => {
            title.value = res.data.data.xiangmumingcheng
			detail.value = res.data.data
			
			// 获取学生信息(从chuangyezhe表查询)
			if (detail.value.xuehao) {
				console.log('Fetching student data for xuehao:', detail.value.xuehao)
				context.$http.get('chuangyezhe/query', {
					params: {
						xuehao: detail.value.xuehao
					}
				}).then(xsRes => {
					console.log('Student data response:', xsRes.data)
					try {
						const shifoubiye = xsRes.data?.data?.shifoubiye || '否'
						detail.value.xuesheng_shifoubiye = shifoubiye
						console.log('Set xuesheng_shifoubiye to:', shifoubiye)
					} catch (e) {
						console.error('Error processing student data:', e)
						detail.value.xuesheng_shifoubiye = '否'
					}
				}).catch(err => {
					console.error('Error fetching student data:', err)
					// Default to showing school fields on error
					detail.value.xuesheng_shifoubiye = '否'
				})
			} else {
				console.warn('No xuehao found in detail')
				// Default to showing school fields if no xuehao
				detail.value.xuesheng_shifoubiye = '否'
			}
		})
	}
	// 下载文件
	const downClick = (file) => {
		if(!file){
			context?.$toolUtil.message('文件不存在','error')
		}
		let arr = file.replace(new RegExp('file/', "g"), "")
		axios.get((location.href.split(context?.$config.name).length>1 ? location.href.split(context?.$config.name)[0] :'') + context?.$config.name + '/file/download?fileName=' + arr, {
			headers: {
				token: context?.$toolUtil.storageGet('frontToken')
			},
			responseType: "blob"
		}).then(({
			data
		}) => {
			const binaryData = [];
			binaryData.push(data);
			const objectUrl = window.URL.createObjectURL(new Blob(binaryData, {
				type: 'application/pdf;chartset=UTF-8'
			}))
			const a = document.createElement('a')
			a.href = objectUrl
			a.download = arr
			// a.click()
			// 下面这个写法兼容火狐
			a.dispatchEvent(new MouseEvent('click', {
				bubbles: true,
				cancelable: true,
				view: window
			}))
			window.URL.revokeObjectURL(data)
		})
	}
	// 判断是否从个人中心跳转
	const centerType = ref(false)
	const init = () => {
		if(route.query.centerType){
			centerType.value = true
		}
		getDetail()
	}
	//审核
	import Approval from '@/components/approval.vue'
	const approvalRef = ref(null)
	const approvalClick = (btnType='审核') => {
		if(!context?.$toolUtil.storageGet('frontToken')){
			context?.$toolUtil.message('请登录后再操作！','error')
			return false
		}
		if(!btnAuth('xiangmushenqing',btnType)){
			context?.$toolUtil.message('暂无权限操作！','error')
			return false
		}
		let row = detail.value
		let params = {
			id: row.id,
			sfsh: row.sfsh,
			shhf: row.shhf,
			role: route.query.role // 添加角色信息
		}
		nextTick(() => {
			approvalRef.value.approvalClick(params)
		})
	}
	//修改
	const editClick = () => {
		router.push(`/index/${tableName}Add?id=${detail.value.id}&&type=edit`)
	}
	//删除
	const delClick = () => {
		ElMessageBox.confirm(`是否删除此${formName}？`, '提示', {
			confirmButtonText: '是',
			cancelButtonText: '否',
			type: 'warning',
		}).then(()=>{
			context?.$http({
				url: `${tableName}/delete`,
				method: 'post',
				data: [detail.value.id]
			}).then(res=>{
				context?.$toolUtil.message('删除成功','success',()=>{
					history.back()
				})
			})

		})
	}
	const xiangmuchengguoonAcross = async (btnType,crossOptAudit,crossOptPay,statusColumnName,tips,statusColumnValue,type=1) => {
		if(!context?.$toolUtil.storageGet('frontToken')){
			context?.$toolUtil.message('请登录后再操作！','error')
			return false
		}
		if(!btnAuth('xiangmushenqing',btnType)){
			context?.$toolUtil.message('暂无权限操作！','error')
			return false
		}
		if(crossOptAudit=='是'&&detail.value.sfsh!='是') {
			context?.$toolUtil.message('请审核通过后再操作！','error')
			return false
		}
		context?.$toolUtil.storageSet('crossObj',JSON.stringify(detail.value))
		context?.$toolUtil.storageSet('crossTable',tableName)
		context?.$toolUtil.storageSet('crossStatusColumnName',statusColumnName)
		context?.$toolUtil.storageSet('crossTips',tips)
		context?.$toolUtil.storageSet('crossStatusColumnValue',statusColumnValue)
		if(statusColumnName!=''&&!statusColumnName.startsWith("[")) {
			var obj = detail.value
			for (var o in obj){
				if(o==statusColumnName && obj[o]==statusColumnValue){
					context?.$toolUtil.message(tips,'warning')
					return;
				}
			}
		}
		nextTick(()=>{
			router.push(`/index/xiangmuchengguoAdd?type=cross&&id=${detail.value.id}`)
		})
	}
	onMounted(()=>{
		init()
	})
</script>
<style lang="scss" scoped>
	// 返回盒子
	.back_view {
		// 返回按钮
		.back_btn {
		}
		// 返回按钮-悬浮
		.back_btn:hover {
		}
	}
	// 面包屑盒子
	.bread_view {
		:deep(.breadcrumb) {
			.el-breadcrumb__separator {
			}
			.first_breadcrumb {
				.el-breadcrumb__inner {
				}
			}
			.second_breadcrumb {
				.el-breadcrumb__inner {
				}
			}
		}
	}

	.detail_view{
		// 轮播图
		.swiper_view {
		}
		// 文字区
		.info_view {

			.title_view {

				.detail_title {
				}
				.collect_view {
					.iconfont {
					}
					.iconfontActive {
					}
					span {
					}
					.textActive {
					}
				}
				.collect_view:hover {
				}
				.collect_view:active {
				}
			}

			.info_item {

				.info_label {
				}
				.info_text {
				}
			}
			.btn_view {
				// 跨表-按钮
				.cross_btn {
				}
				// 悬浮
				.cross_btn:hover {
				}
				// 审核-按钮
				.approval_btn {
				}
				// 悬浮
				.approval_btn:hover {
				}
				// 修改-按钮
				.edit_btn {
				}
				// 悬浮
				.edit_btn:hover {
				}
				// 删除-按钮
				.del_btn {
				}
				// 悬浮
				.del_btn:hover {
				}
			}
		}
	}

	//底部盒子
	.tabs_view {
		:deep(.el-tabs__header) {
			background: transparent;
			border: none;
		}
		// 头部
		:deep(.el-tabs__nav-scroll) {
			.el-tabs__nav {
				.el-tabs__item {
				}
				.el-tabs__item:hover {
				}
				.is-active {
				}
			}
		}
		// 内容区
		:deep(.el-tabs__content) {
		}
	}
</style>
